<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>报名支付</title>
</head>
<body>
	<jsp:include page="/WEB-INF/page/common/_header.jsp"/>
	<c:if test="${error != null}">
		<p style="color:#f30606">${error }</p>
	</c:if>
	<c:if test="${error == null}">
		<div class="bmf-top bgfff">
			<p>报名费：<span class="bmf-top-priceWrap">￥<span class="bmf-top-price">${order.totalAmount }</span></span></p>
			<c:if test="${parent.points > 10000 }">
				<p>
					<input id="pointChk" type="checkbox"/>您有${parent.points }积分,<span id="pointText">可兑换<fmt:formatNumber type="number" value="${parent.points / 100}" maxFractionDigits="2"/>元</span>
				</p>
			</c:if>
		</div>
		<div class="blockHead bmf-blockHead">
			<h4>选择支付方式</h4>
		</div>
		<div class="bmf-list">
			<ul class="clearfix bgfff">
				<li class="clearfix">
					<div class="bmf-list-l">
						<img src="<%=basePath %>/images/wechat.png" alt="" />
					</div>
					<div class="bmf-list-c">
						<p class="bmf-list-line1">微信支付</p>
						<p class="bmf-list-line2">适合于经常使用微信的同学</p>
					</div>
					<div class="bmf-list-r">
						<span class="icon icon-select on"></span>
					</div>
				</li>
			</ul>
		</div>
		<footer class="footer">
	        <div>
	        	<div class="group-sign-left">合计：<span class="price">¥<span id="amount">${order.totalAmount }</span></span></div>
	        	<div class="group-sign-right" id="regMT-btn">预约报名</div>
	    	</div>
	    </footer>
	</c:if>
	
	
	<script type="text/javascript">
		$(function() {
			$(".bmf-list li").click(function(){
				var obj = $(this);
				obj.find(".icon").addClass("on");
				obj.siblings().find(".icon").removeClass("on");
			})
			var pointText;
			$("#pointChk").click(function() {
				if(pointText) {
					pointChk = $("#pointText").text();
				}
				if(this.checked) {
					$("#pointText").html("可使用 <input type='number' id='exchangePoints' oninput='expoint(this)' propertychange='expoint(this)' style='width: 60px;height: 20px;padding: 0px;font-size: 13px;text-align: center;'/> 兑换 <span id='exchange'>0</span> 元");
				}else {
					$("#pointText").html(pointText);
				}
			});
			$("#regMT-btn").on("click",function() {
				if(payData != null) {
					onBridgeReady(payData);
					return;
				}
				$.ajax({
			 		url : basePath + "/pay/sign",
			 		type : "post",
			 		data : {
			 			channel: 'WeiXin',
			 			orderNo: '${order.orderNo}',
			 			exchangePoints: $("#exchangePoints").val()
			 		},
			 		dataType : "json",
			 		async : false,
			 		success : function(data) {
			 			if(data.code == '000') {
			 				payData = data.data;
			 				onBridgeReady(payData);
			 			}else {
			 				alert(data.msg);
			 			}
			 		}, error:function(){
			 			alert("系统异常，请联系管理员");
	        		}
			 	});
			});
		});
		function expoint(thiz) {
			var val = parseInt(thiz.value);
			if(!val) {
				$("#amount").html('${order.totalAmount }');
				return;
			}
			var total = parseInt('${parent.points }');
			if(val > total){
				$(thiz).val(total);
				val = total;
			}
			var result = val/100;
			$("#exchange").html(result);
			$("#amount").html(parseInt('${order.totalAmount }') - result);
		}
	</script>
</body>
</html>